<template>
	
		<!-- <scroll-view class="topics-scroll" scroll-x="true">
			<view class="note-topics-1" v-for="(t, i) in topics1" :key="t.id">
				#{{t.name}}
			</view>
		</scroll-view> -->
		<!-- <view class="topics-row" v-for="(tArr, i) in topics" :key="i"> -->
			
		<!-- </view> -->
		
		<scroll-view class="note-view" :scroll-y="true" :lower-threshold="50" @scrolltolower="scrolltolowerHandle">
			<scroll-view class="topics-row" :scroll-with-animation="true" :scroll-x="true" v-for="(tArr, i) in topics" :key="i">
				<view class="label-item" v-for="t in tArr" :key="t.id">
					#{{t.name}}
				</view>
			</scroll-view>
			<view class="notes-list">
				<view class="notes-item" v-for="(l, i) in list" :key="i">
					<view class="" v-if="l.type == 2">
						<image class="item-image" :src="l.activity.image" mode="widthFix"></image>
						<view class="activity-name">
							{{l.activity.name}}
						</view>
						<view class="item-bottom">
							<view class="item-author">
								<image class="author-avatar" :src="l.activity.author.p" mode="aspectFill"></image>
								<view class="author-name">{{l.activity.author.n}}</view>
							</view>
							<view class="item-right">
								<image class="action-icon" :src="l.activity.action_icon" mode="widthFix"></image>
								<view class="action-title">
									{{l.activity.action_title}}
								</view>
							</view>
						</view>
					</view>
					<view class="" v-else-if="l.type == 1">
						<image class="item-image" :src="l.note.image_u" mode="widthFix"></image>
						<view class="straight-text" v-if="l.note.straight_text">
							{{l.note.straight_text}}
						</view>
						<view class="activity-name">
							{{l.note.title}}
						</view>
						<view class="item-bottom">
							<view class="item-author">
								<image class="author-avatar" :src="l.note.author.p" mode="aspectFill"></image>
								<view class="author-name">{{l.note.author.n}}</view>
							</view>
							<view class="item-right">
								<image class="action-icon" src="/static/icons/ax.png" mode="widthFix"></image>
								<view class="action-title">
									{{l.note.like_count}}
								</view>
							</view>
						</view>
					</view>
				</view>
			
				<!-- 创建额外标签，撑开 notes-list 这个盒子的高度 -->
				<!-- <view class="clear"></view> -->
			</view>
			<u-gap height="80" bgColor="#fff"></u-gap>
			<LoadingBar></LoadingBar>
		</scroll-view>
	
</template>

<script>
	import { mapState } from 'vuex'
	import { http } from '../untils/http.js'
	import LoadingBar from '../../douguoApp/components/LoadingBar.vue'
	
	const url = 'home/notes/10/20'
	
	export default {
		name:"NotesView",
		data() {
			return {
				list: [],
				topics: [],
				// 标记网络是否正在请求中
				loading: false
			};
		},
		created() {
			console.log('笔记页面出生了');
			// 第一次网络请求，需要请求topics
			// 后续加载不需要请求
			http('home/notes/0/20').then(res => {
				// console.log('笔记页面自己发送网络请求拿到的数据', res);
				this.topics = res.result.topics
				// console.log(this.topics);
				
				this.list = res.result.list
				console.log(this.list);
				
				this.$nextTick(() => {
					this.loading = false
				})
			})
			
			// this.getNotesFromSerever()	
		},
		methods: {
			getNotesFromSerever() {
				this.loading = 'true'
				let url = 'home/notes/' + this.list.length + '/20'
				
				// 第一次网络请求，需要请求topics
				// 后续加载不需要请求
				http(url).then(res => {
					
					this.list = [...this.list, ...res.result.list]
					console.log(this.list);
					
					this.$nextTick(() => {
						this.loading = false
					})
				})
			},
			scrolltolowerHandle() {
				if(!this.loading) {
					console.log('滑到底部');
					this.getNotesFromSerever()
				}
			},
			getDataFromServerData(cb) {
				// let url = 'home/notes/10/20'
				console.log('重新请求数据');
				let timeStamp = new Date().getTime()
				http(url + '?timestamp=' + timeStamp).then((res) => {
					cb && this.$nextTick(cb)
					this.list = res.result.list
				})
			}
		},
		components: {
			LoadingBar
		}
	}
</script>

<style lang="scss">
	.note-view {
		position: fixed;
		top: 77px;
		bottom: 50px;
	}
	
	.topics-row {
		margin: 8px 0;
		padding: 2px 0;
		width: 750rpx;
		white-space: nowrap;
		// overflow: auto;
	}
	
	.label-item {
		display: inline-block;
		margin-right: 5px;
		padding: 0 10px;
		border-radius: 999px;
		font-size: 12px;
		line-height: 28px;
		white-space: nowrap;
		background-color: #ccfbe9;
		color: #699a99;
		
	}
	
	.notes-list {
		padding: 0 18rpx;
		column-count: 2;
		column-gap: 20rpx;
		// column-fill: auto;
		
		// // 伪元素
		// // 在页面中创建一个假的 DOM节点
		// &::before {
		// 	content: '';
		// 	display: block;
		// 	clear: both;
		// }
		
		// &::after {
		// 	content: '';
		// 	display: block;
		// 	clear: both;
		// }
	}
	
	// // 清除浮动的规范写法
	// .notes-list {
	// 	// 伪元素
	// 	// 在页面中创建一个假的 DOM节点
	// 	&::before {
	// 		content: '';
	// 		display: block;
	// 		clear: both;
	// 	}
		
	// 	&::after {
	// 		content: '';
	// 		display: block;
	// 		clear: both;
	// 	}
	// }
	
	// .clear {
	// 	clear: left;
	// }
	
	
	
	.notes-item {
		// 告诉父元素在分页时不要再内部中断
		break-inside: avoid;
		
		margin-bottom: 10px;
		// float: left;
		// margin-left: 15rpx;
		width: 345rpx;
		border-radius: 8px;
		overflow: hidden;
		background-color: #efefef;
		
		.item-image {
			display: block;
			margin-bottom: 5px;
			width: 100%;
		}
		
		// 连续打卡
		.straight-text {
			// padding: 0 5px;
			margin-left: 5px;
			font-size: 20px;
			font-weight: 600;
			line-height: 14px;
			white-space: nowrap;
			transform-origin: 0 50%;
			transform: scale(.5);
			
			color: #969696;
		}
		
		.activity-name {
			padding: 5px;
			font-size: 14px;
			font-weight: 700;
			line-height: 18px;
			max-height: 32px;
			overflow: hidden;
			// text-overflow: ellipsis;
		}
		
		.item-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.item-author {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			padding: 5px;
			
			.author-avatar {
				display: block;
				margin-right: 2px;
				border-radius: 999px;
				width: 14px;
				height: 14px;
			}
			
			.author-name {
				// 0表示禁止 flex 缩放
				flex: 0 0 170rpx;
				white-space: nowrap;
				// max-width: 35%;
				width: 170rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 18px;
				font-weight: 600;
				color: #666;
				
				// 形变的坐标轴中心点
				transform-origin: 0 50%;
				
				transform: scale(.5);
			}
		}
		
		.item-right {
			display: flex;
			align-items: center;
			
			.action-icon {
				display: block;
				width: 14px;
				height: 14px;
			}
			
			.action-title {
				font-size: 18px;
				font-weight: 600;
				white-space: nowrap;
				// color: #666;
				
				// 形变的坐标轴中心点
				transform-origin: 4px 50%;
				
				transform: scale(.5);
			}
		}
	}
	
	
</style>